<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h3>补贴数据</h3>
    </div>
    <div class="text item">
      <el-form label-width="130px">
        <h3>补贴金额总数</h3>
        <el-form-item label="总数">
          <el-input v-model="subdisyList.sum"/>
        </el-form-item>
      </el-form>

      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>补贴金额/年</h3>
            <el-form-item v-for="(item, i) in subdisyList.sumGroupByYear" :key="i" >
              <template #label>
                <span>{{item.year}}</span>
                <el-button size="small" type="danger" @click="subdisyList.sumGroupByYear.splice(i,1)">-</el-button>
              </template>
                <el-input v-model="item.sum" clearable @clear="subdisyList.sumGroupByYear.splice(i, 1)"/>
            </el-form-item>
      </el-form>


      <el-form :inline="true" label-width="130px">
        <el-form-item label="日期">
          <el-date-picker
              v-model="sumGroupByYear.year"
              placeholder="选择年"
              style="width: 100%"
              type="year"
              value-format="yyyy">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="sumGroupByYear.sum"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitSumGroupByYear">确定</el-button>
        </el-form-item>
      </el-form>


      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>补贴金额/月</h3>
            <el-form-item v-for="(item, i) in subdisyList.sumGroupByMonth" :key="i" >
              <template #label>
                <span>{{item.month}}</span>
                <el-button size="small" type="danger" @click="subdisyList.sumGroupByMonth.splice(i,1)">-</el-button>
              </template>
              <el-input v-model="item.sum" clearable @clear="subdisyList.sumGroupByMonth.splice(i, 1)"/>
            </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="130px">

        <el-form-item label="日期">
          <el-date-picker
              v-model="sumGroupByMonth.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="sumGroupByMonth.sum"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitSumGroupByMonth">确定</el-button>
        </el-form-item>
      </el-form>


      <div style="text-align: right">
        <el-button type="danger" @click="OverWrite">恢复真实数据</el-button>
        <el-button type="danger" @click="setSubsidyJson">确定修改</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import {getJson, overWrite, setJson} from "../../network/versionApi";
import {copyObj} from "../../common/utils";

export default {
  name: "subsidyVersion",
  data() {
    return {
      param: {
        type: "Subsidy",
        name: "statistics",
        version: 0,
      },
      subdisyList: {},
      sumGroupByYear: {
        year: null,
        sum: null
      },
      sumGroupByMonth: {
        month: null,
        sum: null
      },
      index: null
    }
  },
  methods: {
    clear() {
      console.log(this.index)
    },

    //添加补贴/月
    submitSumGroupByMonth() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.subdisyList.sumGroupByMonth.unshift(copyObj(this.sumGroupByMonth))
        this.sumGroupByMonth = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    //添加补贴/年
    submitSumGroupByYear() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.subdisyList.sumGroupByYear.unshift(copyObj(this.sumGroupByYear))
        this.sumGroupByYear = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },


    getSubsidyJson() {
      this.param.version = this.subsidy;
      getJson(this.param).then(res => {
        this.subdisyList = res.data;
        // console.log(this.subdisyList)
      }).catch(() => {
        // this.getSubsidyJson()
      })
    },
    setSubsidyJson() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setJson(this.param, this.subdisyList).then(() => {
          this.getSubsidyJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
    OverWrite() {
      this.$confirm('确定恢复真实数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        overWrite(this.param).then(res => {
          console.log(res)
          this.getSubsidyJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
  },
  watch: {
    "subsidy": {
      handler: function () {
        this.getSubsidyJson();
      }
    }
  },
  mounted() {
    if (!this.watch) {
      this.getSubsidyJson();
    }
  },
  props: ["subsidy"]
}
</script>

<style scoped>

</style>